.mybgcarousel-index{ /* CSS for specific carousel container called #mybgcarousel. */
width:100%;
height:550px;
position:relative;
margin:auto;
}

/* ######### Shared CSS for various parts of carousel (in the event of multiple carousels) ######### */

div.bgcarousel{ /* shared CSS for main carousel container */
background: #eee url(ajaxload.gif) center center no-repeat; /* loading gif while caoursel is loading */
}

div.bgcarousel img.navbutton{ /* CSS for the nav buttons */
}

div.bgcarousel div.slide{ /* CSS for each image's DIV container within main container */

background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}

div.selectedslide{ /* CSS for currently selected slide */}
div.slide div.desc{position: absolute;color: red;left: 10px;top: 420px;width:375px;padding: 5px;
font: bold 18px Arial;text-shadow: 1px 0px yellow;z-index:5;}
div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */}
div.slide div.desc h2{font-size:150%;margin:0;}
div.slide div.desc a{color:yellow;text-decoration:none;}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	
.mybgcarousel-index{width:100%;
height:350px;}
div.selectedslide{ /* CSS for currently selected slide */}
div.slide div.desc{position: absolute;color: red;left: 10px;top: 220px;width:350px;padding: 5px;
font: bold 15px Arial;text-shadow: 1px 0px yellow;z-index:5;}
div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */}
div.slide div.desc h2{font-size:150%;margin:0;}
div.slide div.desc a{color:yellow;text-decoration:none;}


}

@media only screen and (max-width: 768px) and (min-width: 481px){
.mybgcarousel-index{width:100%;
height:400px;}
div.selectedslide{ /* CSS for currently selected slide */}
div.slide div.desc{position: absolute;color: red;left: 10px;top: 300px;width:350px;padding: 5px;
font: bold 15px Arial;text-shadow: 1px 0px yellow;z-index:5;}
div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */}
div.slide div.desc h2{font-size:150%;margin:0;}
div.slide div.desc a{color:yellow;text-decoration:none;}
}

@media only screen and (max-width: 1024px) and (min-width: 769px){
.mybgcarousel-index{width:100%;
height:450px;}
div.selectedslide{ /* CSS for currently selected slide */}
div.slide div.desc{position: absolute;color: red;left: 10px;top: 400px;width:350px;padding: 5px;
font: bold 15px Arial;text-shadow: 1px 0px yellow;z-index:5;}
div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */}
div.slide div.desc h2{font-size:150%;margin:0;}
div.slide div.desc a{color:yellow;text-decoration:none;}
}